<script setup>
import {ref, toRefs} from "vue";
import {useDefaultAvatarStore} from "@/stores/defaultAvatar.js";
import {formatTime} from "@/utils/formatTime.js";
const pros = defineProps({
  isSelf:Boolean,
  messageContent:String,
  isRead:Number,
  time:String,
  sendUserPic:String,
  receiveUserPic:String
})

const state = toRefs(pros);
const isSelf = ref(state.isSelf);
const messageContent = ref(state.messageContent);
const isRead = ref(state.isRead);
const time = ref(formatTime(state.time.value));
const sendUserPic = ref(state.sendUserPic);
const receiveUserPic = ref(state.receiveUserPic);

const defaultAvatarStore = useDefaultAvatarStore();
</script>

<template>
<div class="main">
  <div v-if="!isSelf" class="other main">
    <img :src="receiveUserPic === null || receiveUserPic === '' ?defaultAvatarStore.defaultAvatar:receiveUserPic" alt="avatar" class="avatar">
    <div class="msg">
      <p>{{messageContent}}</p>
    </div>
    <div class="msg-info">
      <div class="time-and-read">
        <p>{{time}}</p>
      </div>
    </div>
  </div>
  <div v-else class="self main">
    <img :src="sendUserPic === null || sendUserPic === '' ?defaultAvatarStore.defaultAvatar:sendUserPic" alt="avatar" class="avatar">
    <div class="msg">
      <p>{{messageContent}}</p>
    </div>
    <div class="msg-info">
      <div class="time-and-read">
        <p>{{time}}</p>
        <p>{{isRead === 0 ? '未读' : '已读'}}</p>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.main{
  width: 100%;
  min-height: 45px;
  display: flex;
  margin: 10px 0;
}
.other{
  .avatar{
    width: 45px;
    height: 45px;
  }
  .msg{
    max-width: 50%;
    background-color: #e8e8e8;
    margin-left: 10px;
    padding: 0 16px;
    border-radius: 16px;
    p{
      margin: 11px 0;
      word-break: break-word;
      white-space: normal;
    }
  }
  .msg-info{
    flex: 1;
    height: 100%;
    display: flex;
    position: relative;
    .time-and-read{
      position: absolute;
      left:18px;
      bottom: 0;
      display: flex;
      flex-direction: column;
      user-select: none;
      p{
        margin: 0 0 5px 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.self{
  display: flex;
  flex-direction: row-reverse;
  .avatar{
    width: 45px;
    height: 45px;
  }
  .msg{
    max-width: 50%;
    background-color: #89D961;
    margin-right: 10px;
    padding: 0 16px;
    border-radius: 16px;
    p{
      margin: 11px 0;
      word-break: break-word;
      white-space: normal;
    }
  }
  .msg-info{
    flex: 1;
    height: 100%;
    display: flex;
    position: relative;
    .time-and-read{
      position: absolute;
      right:18px;
      bottom: 0;
      display: flex;
      flex-direction: column;
      user-select: none;
      p{
        margin: 0 0 5px 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>